<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>WeChat</title>
		<link rel="stylesheet" type="text/css" href="../css/wechat.css"/>
		<link rel="stylesheet" type="text/css" href="../css/address_book.css"/>
	</head>
		<body>
		<div class="screen">
			<!-- 状态栏 -->
			<div class="status_bar">
				<div class="signal">
					<img src="../img/信号.svg" alt="">
					<img src="../img/信号.svg" alt="">
					<p>15k/s</p>
				</div>
				<div class="time">
					<p>18:53</p>
				</div>
				<div class="other">
					<img src="../img/WiFi.svg" alt="">
					<img src="../img/铃声-静音.svg" alt="">
					<p>49%</p>
					<img src="../img/电池电量.svg" alt="">
				</div>
			</div>
			<!-- 微信头部 -->
			<div class="header" id="header_add">
				<p>通讯录</p>
			<div class="weright">
				<img src="../img/查找.svg" alt="">
				<img src="../img/添加.svg" alt="">
			</div>
			</div>
			<!-- 主体	 -->
			<div class="main">
				
				<ul class="address_book">
					<li>
						<div class="photo1">
							<img src="../img/227注册、添加好友.svg" alt="">
						</div>
						<div class="name1">
							<p class="line">新的朋友</p>
						</div>
					</li>
					<li>
						<div class="photo1">
							<img src="../img/037-群聊设置.svg" alt="">
						</div>
						<div class="name1">
							<p class="line">群聊</p>
						</div>
					</li>
					<li>
						<div class="photo1">
							<img src="../img/标签.svg" alt="">
						</div>
						<div class="name1">
							<p class="line">标签</p>
						</div>
					</li>
					<li>
						<div class="photo1">
							<img src="../img/公众号.svg" alt="">
						</div>
						<div class="name1">
							<p>公众号</p>
						</div>
					</li>
					<p>A</p>
					<li>
						<div class="photo1">
							<img src="../img/A1.jpeg" alt="">
						</div>
						<div class="name1">
							<p class="line">阿贰</p>
						</div>
					</li>
					<li>
						<div class="photo1">
							<img src="../img/A4.jpeg" alt="">
						</div>
						<div class="name1">
							<p class="line">a girl</p>
						</div>
					</li>
					<li>
						<div class="photo1">
							<img src="../img/A2.jpg" alt="">
						</div>
						<div class="name1">
							<p class="line">a boy</p>
						</div>
					</li>
					<li>
						<div class="photo1">
							<img src="../img/艾艾.jpg" alt="">
						</div>
						<div class="name1">
							<p class="line">艾艾</p>
						</div>
					</li>
					<li>
						<div class="photo1">
							<img src="../img/A3.jpg" alt="">
						</div>
						<div class="name1">
							<p>俺要打屎你</p>
						</div>
					</li>
					<p>E</p>
					<li>
						<div class="photo1">
							<img src="../img/head_erhuo.jpg" alt="">
						</div>
						<div class="name1">
							<p class="line">贰货不二</p>
						</div>
					</li>
					<li>
						<div class="photo1">
							<img src="../img/E2.jpeg" alt="">
						</div>
						<div class="name1">
							<p>厄难</p>
						</div>
					</li>
					<p>F</p>
					<li>
						<div class="photo1">
							<img src="../img/F1.jpg" alt="">
						</div>
						<div class="name1">
							<p class="line">Forever</p>
						</div>
					</li>
					<li>
						<div class="photo1">
							<img src="../img/F2.jpg" alt="">
						</div>
						<div class="name1">
							<p class="line">风一样的男子</p>
						</div>
					</li>
					<li>
						<div class="photo1">
							<img src="../img/F3.jpeg" alt="">
						</div>
						<div class="name1">
							<p>非法拘禁</p>
						</div>
					</li>
					<p>L</p>
					<li>
						<div class="photo1">
							<img src="../img/李彦宏.jpg" alt="">
						</div>
						<div class="name1">
							<p>李彦宏</p>
						</div>
					</li>
					<p>M</p>
					<li>
						<div class="photo1">
							<img src="../img/马化腾.jpg" alt="">
						</div>
						<div class="name1">
							<p class="line">马化腾</p>
						</div>
					</li>
					<li>
						<div class="photo1">
							<img src="../img/马云.jpg" alt="">
						</div>
						<div class="name1">
							<p>马云</p>
						</div>
					</li>
					<p>T</p>
					<li>
						<div class="photo1">
							<img src="../img/Trump.jpg" alt="">
						</div>
						<div class="name1">
							<p>Trump</p>
						</div>
					</li>
					<p>X</p>
					<li>
						<div class="photo1">
							<img src="../img/习主席.jpg" alt="">
						</div>
						<div class="name1">
							<p>习主席</p>
						</div>
					</li>
					<div class="count">
						<p>15位联系人</p>
					</div>
				</ul>
				<div class="letter1">
					<div class="letter">
						<ul class="letter2">
							<li>↑</li>
							<li>☆</li>
							<li>A</li>
							<li>B</li>
							<li>C</li>
							<li>D</li>
							<li>E</li>
							<li>F</li>
							<li>G</li>
							<li>H</li>
							<li>I</li>
							<li>J</li>
							<li>K</li>
							<li>L</li>
							<li>M</li>
							<li>N</li>
							<li>O</li>
							<li>P</li>
							<li>Q</li>
							<li>R</li>
							<li>S</li>
							<li>T</li>
							<li>U</li>
							<li>V</li>
							<li>W</li>
							<li>X</li>
							<li>Y</li>
							<li>Z</li>
							<li>#</li>
						</ul>
					</div>
				</div>
			</div>
			
			
			<!-- footer区 -->
			<div class="footer">
				<div class="wechat">
					<a href="../wechat.html" class="a1add" target="_self">
						<div class="imgs oneadd">
						</div>
						微信
					</a>
				</div>
				
				<div class="wechat">
					<a href="wechat.html" class="a2add" target="_self">
						<div class="imgs twoadd">
						</div>
						通讯录
					</a>
				</div>
				
				<div class="wechat">
					<a href="find.html" class="a3" target="_self">
						<div class="imgs three">
						</div>
						发现
					</a>
				</div>
				
				<div class="wechat">
					<a href="me.html" class="a4" target="_self">
						<div class="imgs four">
						</div>
						我
					</a>
				</div>
			</div>
		</div>
	</body>
</html>
